/* 
  area.hot  热门城市数据
  area.cities  所有城市数据

*/
;(function ($) {
  var opts = {
    tabs: [
      ['A', 'B', 'C', 'D', 'E'],
      ['F', 'G', 'H', 'J'],
      ['K', 'L', 'M', 'N', 'P'],
      ['Q', 'R', 'S', 'T', 'W'],
      ['X', 'Y', 'Z']
    ]
  }

  var hotCity = function (arr) {
    var $hot = $('<div class="wrapper hc"></div>')
    $hot.append('<h4 class="hot-title">热门城市</h4>')
    // 遍历数组生成span插入到$hot中
    var $cities = $('<div class="all-cities"></div>')
    $.each(arr, function (index, city) {
      // console.log(city)
      // 生成sapn
      $cities.append('<span code="' + city.code + '">' + city.name + '</span>')
    })
    $hot.append($cities)
    return $hot
  }


  var tabsPanel = function (arr) {
    var $tabs = $('<p class="tabs"></p>')
    $.each(arr, function (index, value) {
      value = value.join('')
      var className = index === 0 ? 'active' : ''
      $tabs.append('<span class="tab_item '+ className +'">' + value + '</span>')
    })
    return $tabs
  }

  var citiesPanel = function () {
    var $content = $('<div class="content"></div>')
    $.each(opts.tabs, function (index, letters) {
      var $tab = $('<div class="tab"></div>')
      if (index !== 0) {
        $tab.hide()
      }
      $.each(letters, function (index, letter) {
        $wrapper = $('<div class="wrapper"></div>')
        var $allCities = $('<div class="all-cities"></div>')
        $.each(area.cities[letter], function (index, city) {
          var $city = $('<span code="'+city.code+'">'+city.name+'</span>')
          $allCities.append($city)
        })
        $wrapper.append('<h4 class="letter-title">' + letter + '</h4>').append($allCities)
        $tab.append($wrapper)
      })
      $content.append($tab)
    })
    return $content
  }

  var  addEvent = function (ele) {
    ele.on('mouseover', '.tab_item', function () {
      $(this).addClass('active').siblings().removeClass('active')
      $('.tab').hide().eq($(this).index()).show()
    })
  }
  $.fn.area = function () {
    this.append(hotCity(area.hot)) // 将hotCity得到的$hot加入到调用该插件的元素中
    var $tabsPanel = tabsPanel(opts.tabs)
    addEvent($tabsPanel)
    this.append($tabsPanel)
    this.append(citiesPanel())
    return this
  }


}(jQuery))